<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #map {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: absolute;
        }
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<script>
    var Map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                preload: 4,
                source: new ol.source.OSM()
            })
        ],
        loadTilesWhileAnimating: true,
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [116.395723, 39.889544],
            zoom: 9
        })
    });

    var option = {
        series: [
            {
                type: 'lines',
                blendMode: 'lighter',
                dimensions: ['value'],
                data: [{ "coords": [[116.4383, 40.1471], [116.4372, 40.1458], [116.4373, 40.1409], [116.4347, 40.1395], [116.4446, 40.1225], [116.445, 40.1189], [116.4537, 40.1187], [116.4553, 40.1046], [116.4551, 40.1031], [116.4504, 40.1025], [116.4336, 40.1016], [116.4334, 40.1038], [116.426, 40.1034], [116.4122, 40.1044], [116.4134, 40.0892], [116.4143, 40.0837], [116.4126, 40.0726], [116.4139, 40.055], [116.4119, 40.0512], [116.412, 40.0455], [116.4151, 40.0401], [116.4179, 40.0316], [116.4174, 40.019], [116.4161, 40.0128], [116.4162, 40.0094], [116.4078, 40.0095], [116.4075, 39.9877], [116.409, 39.9883], [116.4168, 39.9885], [116.4172, 39.9833], [116.4242, 39.9834], [116.4249, 39.9692], [116.4348, 39.9694], [116.4369, 39.9689], [116.4598, 39.9539], [116.4614, 39.9516], [116.4614, 39.9336], [116.4782, 39.9337], [116.4778, 39.908], [116.486, 39.908], [116.4893, 39.9058], [116.4971, 39.9078]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4383, 40.1471], [116.4372, 40.1458], [116.4373, 40.1409], [116.4347, 40.1395], [116.4446, 40.1225], [116.445, 40.1189], [116.4537, 40.1187], [116.4553, 40.1046], [116.4551, 40.1031], [116.4504, 40.1025], [116.4336, 40.1016], [116.4334, 40.1038], [116.426, 40.1034], [116.4122, 40.1044], [116.4134, 40.0892], [116.4143, 40.0837], [116.4126, 40.0726], [116.4139, 40.055], [116.4119, 40.0512], [116.412, 40.0455], [116.4151, 40.0401], [116.4179, 40.0316], [116.4174, 40.019], [116.4161, 40.0128], [116.4162, 40.0094], [116.4078, 40.0095], [116.4075, 39.9877], [116.409, 39.9883], [116.4168, 39.9885], [116.4172, 39.9833], [116.4242, 39.9834], [116.4249, 39.9692], [116.4348, 39.9694], [116.4369, 39.9689], [116.4598, 39.9539], [116.4614, 39.9516], [116.4614, 39.9336], [116.4782, 39.9337], [116.4778, 39.908], [116.486, 39.908], [116.4893, 39.9058], [116.4971, 39.9078]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4311, 39.9594], [116.4319, 39.9595], [116.4352, 39.9595], [116.4408, 39.9596], [116.4437, 39.9599], [116.4467, 39.9626], [116.4475, 39.9621], [116.4496, 39.9607], [116.4499, 39.9605], [116.45, 39.9604], [116.4496, 39.9601], [116.4483, 39.9588], [116.4462, 39.9569], [116.4453, 39.956], [116.4437, 39.9551], [116.4344, 39.9545], [116.4352, 39.9595], [116.4252, 39.9594], [116.4251, 39.9594], [116.408, 39.9591], [116.4079, 39.9591], [116.4079, 39.959], [116.4079, 39.9582], [116.4079, 39.9567], [116.408, 39.9559], [116.408, 39.9531], [116.408, 39.9527], [116.4081, 39.9516], [116.4081, 39.9497], [116.4081, 39.9485], [116.4083, 39.9463], [116.4084, 39.9437], [116.4085, 39.9412], [116.4085, 39.9387], [116.4086, 39.9363], [116.4086, 39.9359], [116.4088, 39.9334], [116.4088, 39.9333], [116.4088, 39.9326], [116.4089, 39.9298], [116.4091, 39.9273], [116.4108, 39.9243], [116.4108, 39.9242], [116.4108, 39.924], [116.411, 39.9185], [116.4066, 39.9184], [116.4066, 39.9152], [116.4067, 39.9152], [116.4115, 39.9155], [116.4126, 39.9155], [116.4138, 39.9121], [116.4138, 39.9114], [116.4114, 39.9105], [116.4114, 39.9093], [116.4115, 39.9081], [116.4115, 39.908], [116.4122, 39.908], [116.413, 39.908], [116.4138, 39.908], [116.4179, 39.9081], [116.418, 39.9071], [116.418, 39.9067], [116.4181, 39.9062], [116.4181, 39.9056], [116.4181, 39.9053], [116.4183, 39.9032], [116.4184, 39.902], [116.4184, 39.9012], [116.4184, 39.901], [116.4186, 39.901], [116.4217, 39.9004], [116.4223, 39.9004], [116.4274, 39.9006], [116.4274, 39.9007], [116.4204, 39.9007], [116.4211, 39.902], [116.4218, 39.9025], [116.4248, 39.9047], [116.4249, 39.9048]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4311, 39.9594], [116.4319, 39.9595], [116.4352, 39.9595], [116.4408, 39.9596], [116.4437, 39.9599], [116.4467, 39.9626], [116.4475, 39.9621], [116.4496, 39.9607], [116.4499, 39.9605], [116.45, 39.9604], [116.4496, 39.9601], [116.4483, 39.9588], [116.4462, 39.9569], [116.4453, 39.956], [116.4437, 39.9551], [116.4344, 39.9545], [116.4352, 39.9595], [116.4252, 39.9594], [116.4251, 39.9594], [116.408, 39.9591], [116.4079, 39.9591], [116.4079, 39.959], [116.4079, 39.9582], [116.4079, 39.9567], [116.408, 39.9559], [116.408, 39.9531], [116.408, 39.9527], [116.4081, 39.9516], [116.4081, 39.9497], [116.4081, 39.9485], [116.4083, 39.9463], [116.4084, 39.9437], [116.4085, 39.9412], [116.4085, 39.9387], [116.4086, 39.9363], [116.4086, 39.9359], [116.4088, 39.9334], [116.4088, 39.9333], [116.4088, 39.9326], [116.4089, 39.9298], [116.4091, 39.9273], [116.4108, 39.9243], [116.4108, 39.9242], [116.4108, 39.924], [116.411, 39.9185], [116.4066, 39.9184], [116.4066, 39.9152], [116.4067, 39.9152], [116.4115, 39.9155], [116.4126, 39.9155], [116.4138, 39.9121], [116.4138, 39.9114], [116.4114, 39.9105], [116.4114, 39.9093], [116.4115, 39.9081], [116.4115, 39.908], [116.4122, 39.908], [116.413, 39.908], [116.4138, 39.908], [116.4179, 39.9081], [116.418, 39.9071], [116.418, 39.9067], [116.4181, 39.9062], [116.4181, 39.9056], [116.4181, 39.9053], [116.4183, 39.9032], [116.4184, 39.902], [116.4184, 39.9012], [116.4184, 39.901], [116.4186, 39.901], [116.4217, 39.9004], [116.4223, 39.9004], [116.4274, 39.9006], [116.4274, 39.9007], [116.4204, 39.9007], [116.4211, 39.902], [116.4218, 39.9025], [116.4248, 39.9047], [116.4249, 39.9048]], "lineStyle": { "color": "#409eff" } }],
                polyline: true,
                large: true,
                animation:false,
                borderWidth:8,
                lineStyle: {
                    type: 'solid',
                    width: 3,
                    shadowBlur: 3,
                    color: '#409eff',
                }
            },
            {
                type: 'lines',
                coordinateSystem: 'bmap',
                polyline: true,
                data: [{ "coords": [[116.4383, 40.1471], [116.4372, 40.1458], [116.4373, 40.1409], [116.4347, 40.1395], [116.4446, 40.1225], [116.445, 40.1189], [116.4537, 40.1187], [116.4553, 40.1046], [116.4551, 40.1031], [116.4504, 40.1025], [116.4336, 40.1016], [116.4334, 40.1038], [116.426, 40.1034], [116.4122, 40.1044], [116.4134, 40.0892], [116.4143, 40.0837], [116.4126, 40.0726], [116.4139, 40.055], [116.4119, 40.0512], [116.412, 40.0455], [116.4151, 40.0401], [116.4179, 40.0316], [116.4174, 40.019], [116.4161, 40.0128], [116.4162, 40.0094], [116.4078, 40.0095],], "lineStyle": { "color": "#409eff" } },],
                lineStyle: {
                    width: 0
                },
                effect: {
                    symbol:'arrow',
                    constantSpeed: 20,
                    show: true,
                    trailLength: 0.3,
                    symbolSize: 10,
                    color: 'red',
                },
                zlevel: 1
            },


        ]
    };
    var echartslayer = new ol3Echarts(option, {
        source: '',
        destination: '',
        hideOnMoving: true,
        forcedRerender: false,
        forcedPrecomposeRerender: false
    });
    echartslayer.appendTo(Map)
</script>
</body>

</html>
